<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: red;
			}
			
			.p{
				
				opacity: 0;
			}
			
			table{
				table-layout: fixed;
				border-collapse: collapse;
				/*border: 1px solid #000;*/
				
			}
			
			td{
				border: 1px solid #000;
				width: 50px;
				height: 50px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>这是标题1</h1>
		<h2>这是标题2</h2>
		<ul class="ul">
			<li>苹果</li>
			<li></li>
			<li>香蕉</li>
			<li>葡萄</li>
			<li>木瓜</li>
		</ul>
		
		<ul id="ul">
			<li class="li_one li_ex">土豆</li>
			<li>番茄</li>
			<li>萝卜</li>
			<li>青椒</li>
			<li></li>
		</ul>
		
		<ul></ul>
		
		<p class="p">这是第一个p</p>
		<p>这是第二个p,我上面有一个p被隐藏了</p>
		<p>这是第三个p</p>
		<div></div>
		
		<form action="" method="post">
			用户名：<input disabled="disabled" type="text" name="name"/><br />
			密码名：<input type="password" name="pwd"/><br />
			性别：<input type="radio" name="sex" value="1"/>男
				<input checked="checked" type="radio" name="sex" value="2"/>女<br />
			爱好：<input checked="checked" name="hooby" type="checkbox" />打篮球
				<input name="hooby" type="checkbox" />踢足球
				<input name="hooby" type="checkbox" />弹钢琴<br />
			<input type="submit" value="提交"/>
		</form>
		<br /><br /><br />
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
		</table>
		
		<a href="#">这是一个a标签</a>
		<a href="">这是一个a标签</a>
		
		
		<select name="name">
			<option selected="selected" value="name">小明</option>
			<option value="name">小红</option>
			<option value="name">小光</option>
			<option value="name">小永</option>
		</select>
		<script src="../jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		    //CSS选择器
			console.log($("li"));			
			console.log($("ul:nth-of-type(2)>li:nth-of-type(1)"));			
			console.log($(".ul"));
			console.log($("#ul"));		
			console.log($(".li_one.li_ex"));
			
			//第一个和最后一个元素
			console.log($("li:first"));
			console.log($("ul:last"));
			
			//奇数元素
			console.log($("li:even"));
			
			//偶数元素
			console.log($("li:odd"));
			
			//元素中的第n个元素
			console.log($("ul:nth-of-type(1)>li:eq(3)"));
			
			//下标大于n的元素
			console.log($("ul:nth-of-type(1)>li:gt(1)"));
			
			//下标小于n的元素
			console.log($("ul:nth-of-type(1)>li:lt(2)"));
			
			//所有不为空的元素
			console.log($("li:not(:empty)"));
			
			//所有标题元素
			console.log($(":header"));
			
			//包含指定字符串的所有元素
			console.log($(":contains('苹果')"));
			
			//无子节点的元素
			console.log($("ul:empty"));
			
			//所有隐藏的元素
			console.log($("p:hidden"));
			
			//所有可见的元素
			console.log($("p:visible"));
			
			//所有带有匹配选择的元素
//			console.log($(""));
			
			//所有带有 href 属性的元素
			console.log($("[href]"));
			
			//所有 href 属性的值不等于 "#" 的元素
			console.log($("a[href!='#']"));
			
			//所有 href 属性的值等于 "#" 的元素
			console.log($("a[href='#']"));
			
			//所有 href 属性的值包含以xxx结尾的元素
			console.log($("a[href$='#']"));
			
			//所有激活的input标签     没有专门去设置disabled的input
			console.log($(":enabled"));
			
			//所有禁用的 input元素     设置了disabled的input
			console.log($(":disabled"));
			
			//所有被选区的option标签
			console.log($(":selected"));
			
			//所有被选中的 input元素    设置了checked的input
			console.log($(":checked"));
			
		</script>
	</body>
</html>
